<template>
  <van-list v-model:loading="loading" loading-text="loading..." :finished="finished" finished-text="没有更多了"
    @load="onLoad" class="video-list">
    <div class="video-item" v-for="feed in feeds" :key="feed.id">
      <div class="video">
        <div class="img-container">
          <img :src="feed.images[0].url" :alt="feed.title">
        </div>
        <div class="title">{{ feed.title }}</div>
        <van-icon name="play-circle-o" class="play-icon" size="60" color="#e54847" @click="gotoPlay(feed)" />
      </div>
      <div class="video-info">
        <div class="author">
          <img :src="feed.user.avatarurl" :alt="feed.user.nickName">
          <span class="user-name">{{ feed.user.nickName }}</span>
        </div>
        <div class="social">
          <span class="thumbs-up"><van-icon name="thumb-circle-o" size="20" /> {{ feed.upCount }}</span>
          <span class="reply"><van-icon name="chat-o" size="20" /> {{ feed.commentCount }}</span>
          <span class="share"><van-icon name="share-o" size="20" />{{ feed.shareCount }}</span>
        </div>
      </div>
    </div>
  </van-list>
</template>

<script setup>
import { fetchVideo } from '@/api/index.js'
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

import { useStore } from "@/stores/index.js"
const store = useStore()

const props = defineProps({
  activeTabIndex: {
    type: Number,
  },
})

// const activeTabIndex = computed(() => props.activeTabIndex)

const loading = ref(false)
const finished = ref(false)

const pageNum = ref(1)
const limit = ref(10)
const offset = computed(() => (pageNum.value - 1) * limit.value)

const videoType = ref([0, 1331498, 1067226]) // 推荐 、热片解读、新片预告

const feeds = ref([])

const hasMore = ref(false);
const isFetching = ref(false); // 添加一个标志位

// onMounted(async () => {
//   console.log("onMounted 当前索引：", activeTabIndex.value);

//   loading.value = true
//   const response = await fetchVideo(offset.value, videoType.value[activeTabIndex])

//   hasMore.value = response.data.paging.hasMore
//   // console.log('fetchVideo', response)
//   if (response.data.feeds.length > 0) {
//     feeds.value.push(...response.data.feeds)
//   }
//   loading.value = false
// })


watch(() => props.activeTabIndex, async (newValue) => { // 监听 activeTabIndex 的变化
  console.log("watch 当前索引：", newValue);
  if (isFetching.value) return; // 如果已经在获取数据，则不重复请求
  isFetching.value = true;

  pageNum.value = 1
  loading.value = true
  const response = await fetchVideo(offset.value, videoType.value[newValue])

  hasMore.value = response.data.paging.hasMore
  // console.log('fetchVideo', response)
  if (response.data.feeds.length > 0) {
    feeds.value.push(...response.data.feeds)
  }
  loading.value = false
  isFetching.value = false
}, { immediate: true });

// 加载更多
const onLoad = async () => {
  console.log("onLoad 当前索引：", props.activeTabIndex);
  if (hasMore.value && !isFetching.value) {
    isFetching.value = true;
    pageNum.value += 1
    loading.value = true
    const response = await fetchVideo(offset.value, videoType.value[props.activeTabIndex])

    hasMore.value = response.data.paging.hasMore
    if (response.data.feeds.length > 0) {
      feeds.value.push(...response.data.feeds)
    }
    loading.value = false
    isFetching.value = false
  }
  if (!hasMore.value) {
    console.log("没有推荐视频了");

    finished.value = true;
    return;
  }
};

const gotoPlay = (feed) => {

  // console.log('store:', store); // 检查 store 是否正确初始化
  // console.log('store.setVideo:', typeof store.setVideo); //

  if (feed) {
    store.setFeed(feed);
    router.push({ path: `/video/${feed.id}` });
  } else {
    console.error('Invalid feed or feed.video is missing');
  }
};

</script>


<style scoped>
.video-list {
  margin-top: calc(50.5px + 44px);
}


.video-item {
  margin-bottom: 5px;
}

.video-item .video {
  position: relative;
}

.video-item .video .img-container {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}


.video-item .video .img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.video-item .video .title {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 17px;
  z-index: 1;
  padding: 10px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden
}

.video-item .video .play-icon {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-item .video-info {
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.video-item .video-info .author {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-item .video-info .author img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 5px;

}

.video-item .video-info .author .user-name {
  font-size: 14px;
  color: #666;


}

.video-item .video-info .social {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-item .video-info .social .thumbs-up {
  font-size: 14px;
  color: #666;
}

.video-item .video-info .social .reply {
  font-size: 14px;
  color: #666;
  margin-left: 20px;
}

.video-item .video-info .social .share {
  margin-left: 20px;
  color: #666;
}
</style>
